<template>
  <el-card class="content">
    <el-row>
      <el-col :span="4">
        <span style="fontsize: 16px">设备名称:</span>
        <el-select size="mini" v-model="query.typeId" clearable>
          <el-option
            v-for="item in stationType"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button class="black-button" size="small" @click="searchName"
          >查询</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="dialogVisible = true"
          >新增</el-button
        >
      </el-col>
      <el-col :span="6"> </el-col>
    </el-row>
    <p class="bg-purple">设备信息管理列表</p>
    <el-table stripe size="small" :data="sensorList">
      <el-table-column
        prop="sensorName"
        label="设备名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="modelNumber"
        label="设备型号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="sensorCode"
        label="设备编号"
        align="center"
      ></el-table-column>
      <el-table-column prop="typeName" label="设备类型" align="center">
      </el-table-column>
      <el-table-column
        prop="manufacturer"
        label="生产厂商"
        align="center"
      ></el-table-column>
      <el-table-column prop="status" label="设备状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">闲置</span>
          <span v-if="scope.row.status == 1">在用</span>
          <span v-if="scope.row.status == 2">损坏</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="storageTime"
        label="入库时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="id"
        label="id"
        align="center"
        v-if="none"
      ></el-table-column>

      <el-table-column
        prop="warrantyPeriod"
        label="保修截止时间"
        align="center"
        width="180px"
      ></el-table-column>
      <el-table-column label="操作" align="center" width="120px" prop="id">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="isEditDialogVisible(scope.row)"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="delSensor(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <!-- <el-col :span="9"> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 15]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- </el-col> -->
    </el-row>
    <!-- 添加弹窗 -->
    <el-dialog
      title="添加设备信息"
      :visible.sync="dialogVisible"
      :width="dialogWidth"
    >
      <el-form
        :model="sensorForm"
        ref="sensorForm"
        label-width="120px"
        size="mini"
        :rules="rules"
      >
        <el-form-item label="设备名称" prop="sensorName">
          <el-input
            v-model="sensorForm.sensorName"
            placeholder="请填写设备名称"
            style="width: 535px"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备型号" size="mini" prop="modelNumber">
              <el-input
                v-model="sensorForm.modelNumber"
                style="width: 180px"
                placeholder="请填写设备型号"
              ></el-input
            ></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型" size="mini" prop="typeId">
              <el-select v-model="sensorForm.typeId">
                <el-option
                  v-for="item in stationType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备编号" size="mini" prop="sensorCode">
              <el-input
                v-model="sensorForm.sensorCode"
                label-width="180px"
                placeholder="请填写设备编号"
                style="width: 180px"
              >
              </el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="设备状态" size="mini" prop="status">
              <el-select v-model="sensorForm.status">
                <el-option
                  v-for="item in status"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item
              label="入库时间"
              label-width="120px"
              prop="storageTime"
            >
              <el-date-picker
                v-model="sensorForm.storageTime"
                placeholder="请填写选择日期时间"
                style="width: 180px"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="端口号" size="mini" prop="port">
              <el-input
                v-model="sensorForm.port"
                style="width: 180px"
                placeholder="请填写端口号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生产厂商" size="mini" prop="manufacturer">
              <el-input
                v-model="sensorForm.manufacturer"
                style="width: 180px"
                placeholder="请填写生产厂商"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="保修截止时间"
              label-width="120px"
              prop="warrantyPeriod"
            >
              <el-date-picker
                v-model="sensorForm.warrantyPeriod"
                placeholder="请选择日期时间"
                style="width: 180px"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="buttonfrom">
          <el-button type="primary" @click="isdialogVisible">确 定</el-button>
          <el-button @click="closeDialogVisible">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog
      title="添加设备信息"
      :visible.sync="editDialogVisible"
      :width="dialogWidth"
    >
      <el-form
        :model="editSensorForm"
        ref="editSensorForm"
        label-width="120px"
        size="mini"
        :rules="ruless"
      >
        <el-form-item label="设备名称" prop="sensorName">
          <el-input
            v-model="editSensorForm.sensorName"
            style="width: 535px"
            placeholder="请填写设备名称"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备型号" size="mini" prop="modelNumber">
              <el-input
                v-model="editSensorForm.modelNumber"
                style="width: 180px"
                placeholder="请填写设备型号"
              ></el-input
            ></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型" size="mini" prop="typeId">
              <el-select v-model="editSensorForm.typeId">
                <el-option
                  v-for="item in stationType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="设备编号" size="mini" prop="sensorCode">
              <el-input
                v-model="editSensorForm.sensorCode"
                label-width="180px"
                placeholder="请填写设备编号"
                style="width: 180px"
              >
              </el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="设备状态" size="mini" prop="status">
              <el-select v-model="editSensorForm.status">
                <el-option
                  v-for="item in status"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>

        <el-row>
          <el-col :span="12"
            ><el-form-item
              label="入库时间"
              label-width="120px"
              prop="storageTime"
            >
              <el-date-picker
                v-model="editSensorForm.storageTime"
                placeholder="请填写选择日期时间"
                style="width: 180px"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="生产厂商" size="mini" prop="manufacturer">
              <el-input
                v-model="editSensorForm.manufacturer"
                style="width: 180px"
                placeholder="请填写生产厂商"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="端口号" size="mini" prop="port">
              <el-input
                v-model="sensorForm.port"
                style="width: 180px"
                placeholder="请填写端口号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="保修截止时间"
              label-width="120px"
              prop="warrantyPeriod"
            >
              <el-date-picker
                v-model="editSensorForm.warrantyPeriod"
                placeholder="请选择日期时间"
                style="width: 180px"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="buttonfrom">
          <el-button type="primary" @click="isEditdialogVisible"
            >确 定</el-button
          >
          <el-button @click="editDialogVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getSensorInforController,
  getSensorInforLists,
  getMonitorTypeList,
} from "../../../api/api";
import axios from "axios";
export default {
  name: "SensorInforControllerChild",
  data() {
    return {
      none: false,
      query: {
        page: 1,
        pagesize: 10,
        typeId: null,
      },
      total: null,
      dialogWidth: "750px",
      // 设备类型
      sensorList: [],
      dialogVisible: false,
      sensorForm: {
        manufacturer: "",
        modelNumber: "",
        sensorCode: "",
        updateTime: "",
        status: null,
        storageTime: "",
        typeId: null,
        warrantyPeriod: "",
        unitId: sessionStorage.getItem("unitId"),
        sensorName: "",
        port: null,
      },
      editDialogVisible: false,
      status: [
        { id: 0, name: "闲置" },
        { id: 1, name: "在用" },
        { id: 2, name: "损坏" },
      ],
      editSensorForm: {
        manufacturer: "",
        modelNumber: "",
        sensorCode: "",
        updateTime: "",
        status: null,
        storageTime: "",
        typeId: null,
        warrantyPeriod: "",
        unitId: null,
        id: null,
        sensorName: "",
        port: null,
      },
      //测点类型
      stationType: [],
      ruless: {
        modelNumber: [
          { required: true, message: "请填写设备型号", trigger: "blur" },
        ],
        sensorName: [
          { required: true, message: "请填写设备名称", trigger: "blur" },
        ],
        unitName: [
          { required: true, message: "请填写企业名称", trigger: "blur" },
        ],
        manufacturer: [
          { required: true, message: "请填写生产厂商", trigger: "blur" },
        ],
        sensorCode: [
          { required: true, message: "请填写设备编号", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择设备状态", trigger: "change" },
        ],
        storageTime: [
          { required: true, message: "请选择入库时间", trigger: "change" },
        ],
        typeId: [
          { required: true, message: "请选择监测类型", trigger: "change" },
        ],
        updateTime: [
          { required: true, message: "请选择更新时间", trigger: "change" },
        ],
        warrantyPeriod: [
          { required: true, message: "请选择保修截止时间", trigger: "change" },
        ],
        port: [{ required: true, message: "请输入端口号", trigger: "blur" }],
      },
      rules: {
        port: [{ required: true, message: "请输入端口号", trigger: "blur" }],
        sensorName: [
          { required: true, message: "请填写设备名称", trigger: "blur" },
        ],
        modelNumber: [
          { required: true, message: "请填写设备型号", trigger: "blur" },
        ],
        unitName: [
          { required: true, message: "请填写企业名称", trigger: "blur" },
        ],
        manufacturer: [
          { required: true, message: "请填写生产厂商", trigger: "blur" },
        ],
        sensorCode: [
          { required: true, message: "请填写设备编号", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择设备状态", trigger: "change" },
        ],
        storageTime: [
          { required: true, message: "请选择入库时间", trigger: "change" },
        ],
        typeId: [
          { required: true, message: "请选择监测类型", trigger: "change" },
        ],
        updateTime: [
          { required: true, message: "请选择更新时间", trigger: "change" },
        ],
        warrantyPeriod: [
          { required: true, message: "请选择保修截止时间", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getSensorListPage();
    this.getTypeList();
    // this.getSensorList();
  },
  methods: {
    //分页查询列表
    async getSensorListPage() {
      const res = await getSensorInforController({
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        typeId: this.query.typeId,
      });
      console.log(res);
      if (res.resultCode == "200") {
        this.sensorList = res.parameter.list;
        this.total = res.parameter.total;
      } else {
        this.sensorList = [];
      }
    },
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getSensorListPage();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getSensorListPage();
    },
    // 查询按钮
    async searchName() {
      const res = await getSensorInforController({
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
        typeId: this.query.typeId,
      });
      console.log(res);
      if (res.resultCode == "200") {
        console.log(res);
        this.$message({
          type: "success",
          message: "成功查询到数据",
          offset: 400,
          duration: 1000,
        });
        this.sensorList = res.parameter.list;
        this.total = res.parameter.total;
      } else if (res.resultCode !== "200") {
        this.$message({
          message: "暂无数据",
          offset: 400,
          duration: 1000,
        });
        this.sensorList = [];
      }
    },
    //查询所有测点类型
    async getTypeList() {
      const res = await getMonitorTypeList();
      this.stationType = res.parameter;
    },
    // 获取所有设备类型
    async getSensorList() {
      const res = await getSensorInforLists();
      this.sensorList = res.parameter;
    },
    // 添加
    isdialogVisible() {
      this.$refs.sensorForm.validate((val) => {
        if (val) {
          console.log(val);
          const formData = new FormData();
          for (const [key, value] of Object.entries(this.sensorForm)) {
            formData.append(key, value);
          }
          axios({
            method: "post",
            url: "/sensor/addSensorInfo",
            data: formData,
          }).then((res) => {
            console.log(res);
            if (res.data.resultCode == "200") {
              this.$message({
                type: "success",
                message: "添加成功",
                offset: 400,
                duration: 1000,
              });
              this.sensorList = res.parameter.list;
              this.getSensorListPage();
              this.dialogVisible = false;
            } else if (res.data.resultCode !== "200") {
              this.$message({
                type: "error",
                message: "添加失败",
                offset: 400,
                duration: 1000,
              });
            }
          });
        } else {
          this.$message({
            type: "error",
            message: "请完成表单",
            offset: 400,
            duration: 1000,
          });
        }
      });
      this.$refs.sensorForm.resetFields();
    },
    closeDialogVisible() {
      this.dialogVisible = false;
      this.$refs.sensorForm.resetFields();
    },
    //修改弹窗
    isEditDialogVisible(row) {
      this.editDialogVisible = true;
      this.editSensorForm.id = row.id;
      (this.editSensorForm.manufacturer = row.manufacturer),
        (this.editSensorForm.modelNumber = row.modelNumber);
      (this.editSensorForm.sensorCode = row.sensorCode),
        (this.editSensorForm.updateTime = row.updateTime),
        (this.editSensorForm.status = row.status),
        (this.editSensorForm.storageTime = row.storageTime),
        (this.editSensorForm.typeId = row.typeId),
        (this.editSensorForm.warrantyPeriod = row.warrantyPeriod);
      this.editSensorForm.unitId = row.unitId;
      this.editSensorForm.sensorName = row.sensorName;
    },
    // //确认修改
    isEditdialogVisible() {
      this.$refs.editSensorForm.validate((val) => {
        if (val) {
          const formData = new FormData();
          for (const [key, value] of Object.entries(this.editSensorForm)) {
            formData.append(key, value);
          }
          axios({
            method: "post",
            url: "/sensor/updateSensorInfo",
            data: formData,
          }).then((res) => {
            if (res.data.resultCode == "200") {
              this.$message({
                type: "success",
                message: "修改成功",
                offset: 400,
                duration: 1000,
              });
              this.getSensorListPage();
              this.editDialogVisible = false;
            } else if (res.data.resultCode == "400") {
              this.$message({
                type: "error",
                message: "修改失败",
                offset: 400,
                duration: 1000,
              });
            }
          });
        }
      });
    },
    delSensor(id) {
      this.$confirm("确定删除吗？")
        .then((_) => {
          axios({
            method: "get",
            url: "/sensor/deleteSensorInfo/" + `${id}`,
          }).then((res) => {
            if (res.data.resultCode == "200") {
              this.getSensorListPage();
              this.$message({
                type: "success",
                message: "删除成功",
                offset: 400,
                duration: 1000,
              });
            } else if (res.data.resultCode == "400") {
              this.$message({
                type: "error",
                message: "删除失败",
                offset: 400,
                duration: 1000,
              });
            }
          });
        })
        .catch((_) => {
          this.$message({
            type: "info",
            message: "已取消删除",
            offset: 400,
            duration: 1000,
          });
        });
    },
    setDialogWidth() {
      var val = document.body.clientWidth;
      const def = 750; // 默认宽度
      if (val < def) {
        this.dialogWidth = "100%";
      } else {
        this.dialogWidth = def + "px";
      }
    },
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.setDialogWidth();
      })();
    };
  },
};
</script>

<style scoped>
.content {
  height: 87vh;
  overflow-y: auto;
}

.black-button {
  background-color: black;
  color: white;
}

.bg-purple {
  background: #d3dce6;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  padding-left: 10px;
}
.buttonfrom {
  margin-left: 200px;
  margin-top: 50px;
}
.el-button {
  font-size: 14px;
  margin-bottom: 8px;
}
.el-table {
  display: block;
  height: 67.2vh;
  overflow-y: auto;
  margin-bottom: 15px;
}
.el-table::before {
  z-index: inherit;
}
</style>
